<!DOCTYPE html>
<html>
  <head>
    <title>GitLab Serverless Framework example</title>
  </head>
  <body>
    <p>Click on the button to run your function. You can send a parameter too!</p>
    <label>
      Param value:
      <input type="text" id="param" placeholder="Input your param value" name="yourParam">
    </label>
    <br>
    <button>Run function</button>
    <p>Function Output:</p>
    <p id="functionOutput"></p>

    <script>
      fetch('./stack.json').then((response) => {
        response.json().then((myJson) => {
          const functionUrl = myJson.ServiceEndpoint + "/hello"

          document.querySelector('button').addEventListener('click', () => {
            const paramValue = document.querySelector('#param').value

            fetch(functionUrl + '?myParam=' + paramValue)
            .then((response) => response.json())
            .then((json) => {
              document.querySelector('#functionOutput').textContent = JSON.stringify(json)
            })
          })
        })
      });
    </script>
  </body>
</html>
